<template>
  <div class="bg-gray-900 min-h-screen ">
    <div class="container  mx-auto text-gray-200 ">
      <h1 class="uppercase">phrase</h1>
      <div v-for="(item, index) in phrase_list">
        <p>{{index}}</p>
        <p class="text-3xl" @click="show_it(index)">{{item.phrase}}</p>
        <p class="text-2xl"  :class="{ 'text-gray-900':currentIndex !== index , 'text-gray-200':currentIndex === index }"  >{{item.chinese}}</p>
        <div class="border-gray-600 border  "></div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Phrase",
  data(){
    return{
      currentIndex : 0,
      phrase_list : [],
      currentPage:0,
      pageSize:0
    }
  },
  methods:{
    show_it(ii){
      this.currentIndex = ii; setTimeout(()=>{this.currentIndex = 99999},360)
    }
  },
  created() {
    document.title = "phrase"
     let __this = this
    axios.get('http://127.0.0.1:8123/phrase/?currentPage=' +__this.currentPage+ '&pageSize=' + __this.pageSize).then(response => {
      console.log(response.data)
      __this.phrase_list = response.data
    })
  }
}
</script>

<style scoped>

</style>
